<template>
	<view>
		<!-- 重绘导航栏 -->
		<u-navbar :is-back="true" title="消息中心" title-color="white" :background="background" :border-bottom="false">
			<view class="navbar-right" slot="right" style="padding-right: 20rpx;color: #FFFFFF;" @click="clear()">
				<image src="../../../static/icon/xxqc.png" style="width: 20rpx;height: 20rpx;" mode=""></image>
			</view>
		</u-navbar>
		<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="u-padding-26">
						<view class="u-flex u-padding-10" style="border-bottom: 1rpx solid #ececec;"
							v-for="(item,index) in infoList" :key="index">
							<view class="u-flex-1" style="position: relative;margin-right: 20rpx;">
								<u-avatar src="../../../static/goods/p1.jpg">
									
								</u-avatar>
								<u-badge type="error" count="7" :offset="[5,5]"></u-badge>
							</view>
							<view class="u-flex-5">
								<h4>{{item.infoName}}</h4>
								<text class="u-font-10" style="color: #c5c5c5;">{{item.infoTop}}</text>
							</view>
							<view class="u-flex-1 u-font-10" style="line-height: 75rpx;color: #c5c5c5;">
								{{item.date}}
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="u-padding-26">
						<view class="u-flex u-padding-10" style="border-bottom: 1rpx solid #ececec;"
							v-for="(item,index) in infoList" :key=index>
							<view class="u-flex-1">
								<image src="../../../static/goods/p1.jpg"
									style="width: 75rpx;height: 75rpx;border-radius: 50%;" mode=""></image>
							</view>
							<view class="u-flex-5">
								<h4>{{item.infoName}}</h4>
								<text class="u-font-10" style="color: #c5c5c5;">{{item.infoTop}}</text>
							</view>
							<view class="u-flex-1 u-font-10" style="line-height: 75rpx;color: #c5c5c5;">
								{{item.date}}
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#00a8ff'
				},
				infoList: [{
					titleImage: '',
					infoName: '喝奶只喝哇哈哈',
					infoTop: '你好医生，有个问题想咨询一下',
					date: '15:00'
				}],
				list: [{
					name: '系统通知'
				}, {
					name: '评论与@'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		methods: {
			clear() {
				console.log("消息清除");
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
		}
	}
</script>

<style>

</style>
